<template>
  <div>
    <el-row :gutter="10">
        <el-col :span="6">
            <el-card height="130">
                <Detail Settitle='总销售额' pirce="￥  126560">
                    <template slot="body" class="body">
                        <div class="box">
                             <div class="box_right">
                                <span>周同比&nbsp;&nbsp;56.67%</span>
                                <svg style="margin-left:3px" t="1644567361371" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4502" width="12" height="12"><path d="M65.582671 735.208665l446.417329-446.41733 446.417329 446.41733z" p-id="4503" fill="#d81e06"></path></svg>
                            </div>
                            <div>
                                <span>日同比&nbsp;&nbsp;19.16%</span>
                                <svg t="1644568069857" style="margin-left:3px" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5569" width="12" height="12"><path d="M79.123059 327.850933l405.024593 413.260162c15.690354 16.009625 41.469484 16.009625 57.160861 0l405.02357-413.260162c24.819269-25.323758 6.877641-68.028373-28.579919-68.028373L107.704001 259.82256C72.245418 259.82256 54.30379 302.527175 79.123059 327.850933z" p-id="5570" fill="#1afa29"></path></svg>
                            </div>
                        </div>
                       
                    </template>
                    <template slot='footer'>
                        <span class="footer_span">日销售额￥ 12423</span> 
                    </template>
                </Detail>
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card>
                <Detail Settitle='访问量' pirce="88460">
                    <template slot="body">
                       <LineDetail/>
                    </template>
                     <template slot='footer'>
                        <span class="footer_span">日访问量 12423</span> 
                    </template>
                </Detail>
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card>
                <Detail Settitle='支付笔数' pirce="88460">
                    <template slot="body">
                        <BarDetail/>
                    </template>
                     <template slot='footer'>
                        <span class="footer_span">转化率 65%</span> 
                    </template>
                </Detail>
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card>
                <Detail Settitle='运营活动效果' pirce="78%">
                    <template slot="body">
                        <ProgressBar/>
                    </template>
                    <template slot='footer'>
                         <div class="box">
                             <div class="box_right">
                                <span>周同比&nbsp;&nbsp;56.67%</span>
                                <svg style="margin-left:3px" t="1644567361371" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4502" width="12" height="12"><path d="M65.582671 735.208665l446.417329-446.41733 446.417329 446.41733z" p-id="4503" fill="#d81e06"></path></svg>
                            </div>
                            <div>
                                <span>日同比&nbsp;&nbsp;19.16%</span>
                                <svg t="1644568069857" style="margin-left:3px" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5569" width="12" height="12"><path d="M79.123059 327.850933l405.024593 413.260162c15.690354 16.009625 41.469484 16.009625 57.160861 0l405.02357-413.260162c24.819269-25.323758 6.877641-68.028373-28.579919-68.028373L107.704001 259.82256C72.245418 259.82256 54.30379 302.527175 79.123059 327.850933z" p-id="5570" fill="#1afa29"></path></svg>
                            </div>
                        </div>
                    </template>
                </Detail>
            </el-card>
        </el-col>
    </el-row>
  </div>
</template>

<script>
import Detail from '@/views/dashboard/CardHead/Detail'
import LineDetail from '@/views/dashboard/CardHead/Detail/LineDetail'
import BarDetail from '@/views/dashboard/CardHead/Detail/BarDetail'
import ProgressBar from '@/views/dashboard/CardHead/Detail/ProgressBar'
export default {
    name:'CardHead',
    components:{
        Detail,
        LineDetail,
        BarDetail,
        ProgressBar
    }
}
</script>

<style lang="scss" scoped>
 ::v-deep .el-card__body{
     padding: 12px;
 }

</style>